<template>
  <div>
    <el-dialog
      title="发送私信"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="1000px"
    >
      <div class="msgDataList">
        <el-form ref="temp" :model="temp" :rules="rules" label-width="110px">
          <el-form-item label="标题" prop="title">
            <el-row>
              <el-col :span="18">
                <el-input v-model.trim="temp.title"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="收件人" prop="receivePerson">
            <el-row>
              <el-col :span="18">
                <div class="user-wrap">
                  <p v-show="initialValue.userId.length == 0">请选择人员</p>
                  <el-tag
                    v-for="tag in initialValue.userId"
                    :key="tag.manager || tag.userId"
                    closable
                    disable-transitions
                    @close="handleClose(tag)"
                    type="primary"
                  >
                    {{ tag.managerName || tag.userName }}
                  </el-tag>
                </div>
              </el-col>
              <el-col :span="4" style="padding-left: 20px">
                <el-button
                  class="user-select-button"
                  type="custom"
                  plain
                  @click="handleSelect()"
                >
                  选择人员
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <UEditor
              ref="ueditor"
              :defaultMsg="temp.content"
              v-if="dialogVisible"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('temp')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <UserSelect
      ref="userSelect"
      :initialValue="initialValue"
      @e-userData="setUserId"
    />
  </div>
</template>
<script>
import { sysNoticeAdd } from '@/api/admin/system/sysNotice.js'
import Bus from '@/utils/bus.js'
export default {
  components: {
    UserSelect: () => import('@/components/userSelect'),
  },
  data() {
    return {
      dialogVisible: false,
      temp: {
        content: '',
        receivePerson: [],
        title: '',
        type: 2,
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        receivePerson: [
          { required: true, message: '请选择人员', trigger: 'change' },
        ],
      },
      initialValue: {
        userId: [],
      },
    }
  },
  mounted() {
    this.$bus.$on('sendMessageTo', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('sendMessageTo')
  },
  methods: {
    init() {
      this.temp = this.$options.data().temp
      this.initialValue.userId = []
      this.dialogVisible = true
    },
    handleSelect() {
      Bus.$emit('userSelect')
    },
    setUserId(v) {
      this.initialValue.userId = []
      this.initialValue.userId = v.userId
      this.temp.receivePerson = v.userId
    },
    handleClose(row) {
      this.initialValue.userId = this.initialValue.userId.filter(
        (v) => v.id != row.id,
      )
      this.temp.receivePerson = this.initialValue.userId.filter(
        (v) => v.id != row.id,
      )
    },
    submitForm(form) {
      this.temp.content = this.$refs.ueditor.message
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.temp.receivePerson = this.initialValue.userId
            .filter((v) => v.id)
            .map((v) => v.id)
          sysNoticeAdd(this.temp).then((res) => {
            if (res.data.code == 0) {
              this.dialogVisible = false
              this.successMsg('发送成功')
              this.$bus.$emit('refreshMsgList')
            }
          })
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
.user-wrap {
  display: inline-block;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  overflow: hidden;
  min-height: 40px;
  cursor: not-allowed;
  margin-right: 20px;
}
.user-wrap p {
  line-height: 40px;
  color: #bbb;
  text-indent: 10px;
}
.user-wrap span {
  margin: 0 5px;
}
</style>